<template>
  <div class="film-actors" v-if="film">
    <div class="film-actors-title">演职人员</div>
    <swiper class="film-actors-swiper" :options="swiperOption">
      <swiper-slide class="actor-item" v-for="(actor, index) in film.actors" :key="index">
        <div class="actor-item-picture" :style="`background-image: url(${actor.avatarAddress});`" :alt="actor.name"
             @click="showFilmActors(index)"></div>
        <div class="actor-item-name">{{ actor.name }}</div>
        <div class="actor-item-role">{{ actor.role }}</div>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { ImagePreview } from 'vant'
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.min.css'

export default {
  name: 'FilmActors',
  components: {
    Swiper,
    SwiperSlide
  },
  data () {
    return {
      swiperBannerList: [],
      // 轮播设置
      swiperOption: {
        slidesPerView: 4,
        spaceBetween: 8
      }
    }
  },
  computed: {
    ...mapState('FilmModule', ['film'])
  },
  methods: {
    showFilmActors (index) {
      ImagePreview({
        images: [...this.film.actors.map((actor) => actor.avatarAddress)],
        closeable: true,
        closeIconPosition: 'top-left',
        startPosition: index
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.film-actors {
  padding: 15px;
  border-top: 10px solid #f4f4f4;
  .film-actors-title {
    padding-bottom: 15px;
    color: #191a1b;
  }
  .film-actors-swiper {
    height: 130px;
    .actor-item {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      div {
        text-align: center;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .actor-item-picture {
        width: 80px;
        height: 80px;
        background-size: cover;
        background-position: center;
        cursor: pointer;
      }
      .actor-item-name {
        width: 80px;
        font-size: 12px;
        color: #191a1b;
        height: 16px;
      }
      .actor-item-role {
        width: 80px;
        font-size: 10px;
        height: 16px;
        color: #797d82;
      }
    }
  }
}
</style>
